﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEvent.aspx.cs" Inherits="Pages_AddEvent" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta name="author" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <!-- "position: fixed" fix for Android 2.2+ -->
    <link rel="stylesheet" href="../assets/CSS/style.css" type="text/css" media="screen" />
    <!--<link rel="stylesheet" href="../assets/CSS/StyleSheet.css" type="text/css" media="screen" />-->
    <script type="text/javascript" src="../assets/JS/Accordion.js"></script>
    <script type="text/javascript" src="../assets/JS/header.js"></script>
    <script type="text/javascript" src="../assets/JS/redips-drag-min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" href="../assets/datepicker/css/datepicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="../assets/datepicker/css/layout.css" />
    <script type="text/javascript" src="../assets/datepicker/js/jquery.js"></script>
    <script type="text/javascript" src="../assets/datepicker/js/datepicker.js"></script>
    <script type="text/javascript" src="../assets/datepicker/js/eye.js"></script>
    <script type="text/javascript" src="../assets/datepicker/js/utils.js"></script>
    <script type="text/javascript" src="../assets/datepicker/js/layout.js?ver=1.0.2"></script>
    <title>fast event window</title>


    <style type="text/css">
.btnadd {
	-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7C987', endColorstr='#dfdfdf');*/
	background-color:#ededed;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	border:3px solid #b3afb3;
	display:inline-block;
	color:#777777;
	font-family:Arial Black;
	font-size:13px;
	font-weight:bold;
	padding:13px 34px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.btnadd:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');*/
	background-color:#F7C987;
}.btnadd:active {
	position:relative;
	top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>

<style type="text/css">
.btnDate {
	-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7C987', endColorstr='##F7C987');*/
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:2px solid #b3afb3;
	display:inline-block;
	color:#777777;
	font-family:Arial Black;
	font-size:9px;
	font-weight:bold;
	padding:5px 7px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
	margin-top:3px;
}.btnDate:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');*/
	background-color:#dfdfdf;
}.btnDate:active {
	position:relative;
	top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>


</head>
<body onload="REDIPS.drag.init()">
 <%--   <div style="text-align:right;padding-right:10px;margin-bottom:10px">
        <a href="#" class="btnadd">
        <div style="width:20%; float:left;"><img src="../assets/images/feather.png" /></div>
        <div style="width:80%; float:right;margin-top:8px;">Add Event</div> 
        </a>
    </div>--%>
    
    
    <div style="margin-left: 5%;">
        <!-- tables inside this DIV could contain drag-able content  -->
        <div id="drag" style="width: 90%;">
            <div style="float: left; width: 70%;">
                <table style="width: 95%;">
                    <colgroup>
                        <col style="width: 10%;" />
                        <col style="width: 10%;" />
                        <col style="width: 10%;" />
                        <col style="width: 10%;" />
                        <col style="width: 10%;" />
                        <col style="width: 10%;" />
                        <col style="width: 10%;" />
                        <col style="width: 10%;" />
                        <col style="width: 10%;" />
                        <col style="width: 10%;" />
                    </colgroup>
                    <tbody>
                        <tr>
                            <td id="message" class="mark">
                                MSG
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td class="" style="background-color: #ffb497;" colspan="2">
                            <div style="font-size:8px;color:#FFF;float:right; padding-bottom:33px;">COUNTRY</div>
                            </td>
                            
                        </tr>
                        <tr>
                            <td class="single">
                            </td>
                            <td class="single">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class="single" 
                            </td>
                            <td class="single" >
                            </td>
                        </tr>
                        <tr>
                            <td class="single">
                            </td>
                            <td class="single">
                            </td>
                            <td class=" single">
                            </td>
                            <td class="single" style="background-color: #97c8ff;" rowspan="2"
                                colspan="2"><div style="color:#FFF;">PLACE</div>
                            </td>
                            <td class=" single" colspan="2" rowspan="2" style="background-color: #fff397;">
                            <div style="color:#CCC;">EVENT</div>
                            </td>
                            <%-- <td></td>--%>
                            <td class=" single">
                            </td>
                            <td class="single">
                            </td>
                            <td class="single">
                            </td>
                        </tr>
                        <tr>
                            <td class="single">
                            </td>
                            <td class="single">
                            </td>
                            <td class=" single">
                            </td>
                            <td class=" single">
                            </td>
                            <%--<td></td>
							<td></td>--%>
                            <td class="single">
                            </td>
                            <td class="single">
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td class=" single" style="background-color: #a1c9ae;">
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td class="trash" colspan="2">
                                TRASH
                            </td>
                            <%--<td class="activity_cell single">
                            </td>--%>
                            <td class=" single">
                            </td>
                            <td class=" single">
                            </td>
                            <td class=" single">
                            </td>
                            <td class=" single">
                            </td>
                            <td class=" single">
                            </td>
                            <td class=" single">
                            </td>
                            <td colspan="2" class="" style="background: #f7c987;">
                                <div style="float: left; width: 60%;">
                                    <br />
                                    <input class="inputDate" id="inputDate" value="04/02/2012" style="width:70px;">
                                    <br />
                                     <a href="#"  onclick="javascript:return dateChange();" class="btnDate">Set Date</a>
                                </div>
                                <div style="float: left; width: 40%;">
                                    <table>
                                        <tr>
                                            <td style="width: 60px; max-height: 60px;">
                                                <div id="timed">
                                                    <div style="vertical-align: bottom; min-width: 100%; max-width: 70px; height: 60px;
                                                        text-align: center; font-size: 11px; line-height: 105%;">
                                                        <div id="dtDay">
                                                            DD</div>
                                                        <br />
                                                        <div id="dtMonth" style="font-size: 24px; font-weight: bold; color: #CCC;">
                                                            MM</div>
                                                        <br />
                                                        <div id="dtYear">
                                                            YYYY</div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                            <%--<td>
                            </td>--%>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="float: right; width: 30%;">
                <div id="AccordionContainer" class="AccordionContainer">
                    <div onclick="runAccordion(1);" class=" AccordionTitle1">
                        <div class="AccordionTitle" onselectstart="return false;">
                            Places
                        </div>
                    </div>
                    <div id="Accordion1Content" class="AccordionContent">
                        <table width="95%">
                            <tr>
                                <td class=" single">
                                    <asp:Repeater ID="rpPlace" runat="server" OnItemDataBound="rp1_dataBound">
                                        <HeaderTemplate>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <div style="width: 20%; position: relative; float: left; padding: 3px; margin-left: 5px;
                                                border: 1px solid #CCC;">
                                                <div id="place" class="drag place clone climit1" obj="PLACE" style="width: 100%; max-width: 60px;
                                                    max-height: 60px;">
                                                    <div align="center" class="imdiv">
                                                        <img src="../Objects/place/<%# Eval("id") %>" style="vertical-align: bottom; width: 100%;
                                                            max-width: 80px; max-height: 80px;" />
                                                    </div>
                                                </div>
                                            </div>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div onclick="runAccordion(2);" class="AccordionTitle2">
                        <div class="AccordionTitle" onselectstart="return false;">
                            Activities
                        </div>
                    </div>
                    <div id="Accordion2Content" class="AccordionContent">
                        <table width="98%">
                            <tr>
                                <td class=" single">
                                    <asp:Repeater ID="rpActivity" runat="server" OnItemDataBound="rp1_dataBound">
                                        <HeaderTemplate>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <div style="width: 20%; position: relative; float: left; padding: 3px; margin-left: 3px;
                                                border: 2px solid #CCC;">
                                                <div id="activity" class="drag activity clone climit1" obj="ACTIVITY" style="width: 100%; max-width: 60px;
                                                    max-height: 60px;">
                                                    <div align="center" class="imdiv">
                                                        <img src="../Objects/activity/<%# Eval("id") %>" style="vertical-align: bottom; width: 100%;
                                                            max-width: 80px; max-height: 80px;" />
                                                    </div>
                                                </div>
                                            </div>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div onclick="runAccordion(3);" class="AccordionTitle3">
                        <div class="AccordionTitle" onselectstart="return false;">
                            Event
                        </div>
                    </div>
                    <div id="Accordion3Content" class="AccordionContent">
                        <table width="98%">
                            <tr>
                                <td class=" single">
                                    <asp:Repeater ID="rpEvent" runat="server" OnItemDataBound="rp1_dataBound">
                                        <HeaderTemplate>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <div style="width: 20%; position: relative; float: left; padding: 3px; margin-left: 3px;
                                                border: 2px solid #CCC;">
                                                <div id="event" class="drag event clone climit1" obj="EVENT" style="width: 100%; max-width: 60px;
                                                    max-height: 60px;">
                                                    <div align="center" class="imdiv">
                                                        <img src="../Objects/event/<%# Eval("id") %>" style="vertical-align: bottom; width: 100%;
                                                            max-width: 80px; max-height: 80px;" />
                                                    </div>
                                                </div>
                                            </div>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div onclick="runAccordion(4);" class="AccordionTitle4">
                        <div class="AccordionTitle" onselectstart="return false;">
                            Countries
                        </div>
                    </div>
                    <div id="Accordion4Content" class="AccordionContent">
                        <table width="98%">
                            <tr>
                                <td class=" single">
                                    <asp:Repeater ID="rpCountry" runat="server" OnItemDataBound="rp1_dataBound">
                                        <HeaderTemplate>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <div style="width: 20%; position: relative; float: left; padding: 3px; margin-left: 3px;
                                                border: 2px solid #CCC;">
                                                <div id="country" class="drag country clone climit1" obj="COUNTRY"  style="width: 100%; max-width: 60px;
                                                    max-height: 60px;">
                                                    <div align="center" class="imdiv">
                                                        <img src="../Objects/countries/<%# Eval("id") %>" style="vertical-align: bottom;
                                                            width: 100%; max-width: 80px; max-height: 80px;" />
                                                    </div>
                                                </div>
                                            </div>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div onclick="runAccordion(5);" class="AccordionTitle5">
                        <div class="AccordionTitle" onselectstart="return false;">
                            People
                        </div>
                    </div>
                    <div id="Accordion5Content" class="AccordionContent">
                        <table width="95%">
                            <tr>
                                <td class=" single">
                                    <asp:Repeater ID="rpPeople" runat="server" OnItemDataBound="rp1_dataBound">
                                        <HeaderTemplate>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <div style="width: 20%; position: relative; float: left; padding: 3px; margin-left: 5px;
                                                border: 1px solid #CCC;">
                                                <div id="people" class="drag people clone climit1" obj="PEOPLE" style="width: 100%; max-width: 60px;
                                                    max-height: 60px; background-color: transparent;">
                                                    <div align="center" class="imdiv" style="background-color: transparent;">
                                                        <img src="../Objects/people/<%# Eval("id") %>" style="vertical-align: bottom; width: 100%;
                                                            max-width: 80px; max-height: 80px;" />
                                                    </div>
                                                </div>
                                            </div>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div id="time" style="float: right; width: 30%; margin-top: 25px;">
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    function dateChange(formated) {
        debugger;
        var date = $('#inputDate').val();
        var day = date.split('/')[1];
        var month = date.split('/')[0];
        var year = date.split('/')[2];
        $('#dtDay').html(day);
        $('#dtMonth').html(month);
        $('#dtYear').html(year);
    }


    $('#inputDate').DatePicker({
        format: 'm/d/Y',
        date: $('#inputDate').val(),
        current: $('#inputDate').val(),
        starts: 1,
        position: 'r',
        onBeforeShow: function () {
            $('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
        },
        onChange: function (formated, dates) {
            alert(formated);
            dateChange(formated);
            $('#inputDate').val(formated);
            $('#inputDate').DatePickerHide();
        }
    }
	);
</script>
